---
title: "Accessibility Checker Rule Help: RPT_Style_HinderFocus1"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Check the keyboard focus indicator is highly visible when using CSS elements for border or outline

<div id="locLevel"></div>

The keyboard focus indicator must be highly visible when default border or outline is modified by CSS

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

All focus indicators should be highly visible and distinguishable. When navigating a Web page with a keyboard, users need to know which element has the keyboard focus. A visual focus indicator might be a vertical bar (a typical cursor) or a visible border surrounding a user interface control.

<div id="locSnippet"></div>

### What to do

 * If the keyboard focus meets visibility standards when tabbing on to the component, no action is needed;
 * OR, use the default focus indicator for the platform;
 * OR, adjust the CSS styling to make the keyboard focus highly visible;
 * OR, use interface components that are highlighted by the user agent when they receive focus;
 * OR, use a script to change the background color or border of the element to make it visually distinct when it receives focus

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 2.4.7 Focus Visible](http://www.ibm.com/able/guidelines/ci162/focus_visible.html)
[WCAG 2.1 CSS technique C15](https://www.w3.org/WAI/WCAG21/Techniques/css/C15)
[WCAG 2.1 Script technique SCR31](https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR31)
[WCAG 2.1 failure technique F78](https://www.w3.org/WAI/WCAG21/Techniques/failures/F78)

### Who does this affect?

 * Blind people using screen readers
 * People who physically cannot use a pointing device

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
